<template>
  <Table
    ref="tableRef"
    :columns="data.columns"
    :handles="data.handles"
    :toolbar="data.toolbar"
    :query="data.query"
    @get-list="getData"
  ></Table>
</template>

<script lang="ts" setup name="stationList">
import Table from "@/components/table/index.vue";
import {
  pageQueryPeripheral,
  delPeripheral,
} from "@/service/apis/pile";
import { queryDicByParent } from "@/service/apis/api";

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(["get-update"]);
onActivated(() => {
  emit("get-update", (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

const data = reactive({
  columns: [
    {
      prop: "deviceType",
      label: "设备类型",
      dic: [] as any,
    },
    {
      prop: "deviceName",
      label: "设备名称",
    },
    {
      prop: "deviceNum",
      label: "设备编号",
    },
    {
      prop: "gateWayNum",
      label: "网关编号",
    },
    {
      prop: "stationName",
      label: "归属电站",
    },
    {
      prop: "operator",
      label: "运营商",
    },
    {
      prop: "deviceStatus",
      label: "设备状态",
      dic: [] as any,
    },
  ],
  handles: [
    {
      label: "修改",
      permission: "peripheralDeviceManagementList.edit",
      handle: (row: any) => {
        router.push({
          name: "peripheralDeviceManagementEdit",
          query: { id: row.id, stationId: row.stationId },
        });
      },
    },
    {
      label: "删除",
      color: "#FA3939",
      permission: "peripheralDeviceManagementList.delete",
      handle: (row: any) => {
        ElMessageBox.confirm(
          "是否执行此操作？",
          "提示",
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).then(() => {
          delPeripheral({
            id: row.id,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: "新增",
      permission: "peripheralDeviceManagementList.add",
      icon: "icon-add",
      type: "primary",
      handle: (row: any) => {
        router.push({
          name: "peripheralDeviceManagementAdd",
        });
      },
    },
  ],
  query: [
    {
      label: "设备类型",
      prop: "deviceType",
      comName: "select",
      props: {
        placeholder: "请选择设备类型",
        options: [] as any,
      },
    },
    {
      label: "设备编号",
      prop: "deviceNum",
      comName: "input",
      props: {
        placeholder: "请输入设备编号",
      },
    },
    {
      label: "归属电站",
      prop: "stationName",
      comName: "input",
      props: {
        placeholder: "请输入归属电站",
      },
    },
    {
      label: "设备状态",
      prop: "deviceStatus",
      comName: "select",
      props: {
        placeholder: "请选择设备状态",
        options: [] as any,
      },
    },
  ],
});

queryDicByParent({
  listDtos: ["peripheralType", "peripheralStatus"],
}).then((res: any) => {
  if (res) {
    data.columns[0].dic = res.peripheralType;
    data.columns[6].dic = res.peripheralStatus;
    
    data.query[0].props.options = res.peripheralType;
    data.query[3].props.options = res.peripheralStatus;
  }
});

const getData = (page: any, search: any) => {
  const form = search.ruleForm;
  pageQueryPeripheral(form, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value?.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};
</script>